<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <title>模板引用</title>
        <!--第一步：安装Vue.js-->
        <script src="./vue.js"></script>
    </head>
    <body>
        <!--第三步：创建HTML模板（根组件）-->
       <div id="app">
         <!--1、创建一个标签，在标签中添加ref属性，并指定引用名-->
         <button ref="button" @click="count++">Count is : {{count}}</button>
        </div>

    </body>
    <script>
        //Vue.createApp({/*根组件选项});
        //选项式API
        //第二步：创建Vue的应用实例
        const app = Vue.createApp({
           data(){//定义所需的状态变量
              return{
                  count:0,//等价于const count = ref(0);
              }
           },
           mounted(){
            //2.直接通过this.$refs.[引用名]获取DOM对象，不用再通过document.getElementById（“xxxx")获取DOM对象
            console.log('this.$refs = ' , this.$refs.button);
           }
        });
      //第四步：在根元素上挂载应用实例，返回根组件实例对象
      const vm = app.mount("#app");//const app = Vue.createApp({}).mount("#app");
    </script>
</html>